var jq = $.noConflict();


jq(document).ready(function() {

    // var myImageSliderObj={
    myImageSliderObj = {
        step: 5,
        id: 'id',
        speed: 10,
        styleTop: 0,
        styleTopMax: 0,
        opacity: 0,
        transitionStep: 5,
        transitionSpeed: 10,
        preview2Container: document.getElementById('myImageSlider-previewImage2'),
        previewContainer: document.getElementById('myImageSlider-previewImage'),
        thumbnailContainer: document.getElementById('myImageSlider-imageContainer'),
        thumbnailHeight: 94,
        //This is height for this image slider!!!
        init: function() {
            var thismyImageSliderObj = this;

            jq("div#myImageSlider-imageContainer img").click(function() {
                jq("div#myImageSlider-imageContainer img").removeClass("active");
                jq(this).addClass("active");
                thismyImageSliderObj.previewContainer.style.opacity = 0;
                thismyImageSliderObj.previewContainer.style.filter = 'alpha(opacity=0)'; /* For IE8 and earlier */
                thismyImageSliderObj.previewContainer.src = this.src;
                thismyImageSliderObj.doTransition();
            });

            this.styleTopMin = -this.thumbnailContainer.getElementsByTagName("img").length * this.thumbnailHeight - 10;
            this.thumbnailContainer.style.height = -1 * this.styleTopMin + "px";
            this.thumbnailContainer.style.width = "100%";
            this.styleTopMin = this.styleTopMin + 100;
        },

        doTransition: function() {
            if (this.opacity < 100) {
                this.opacity = this.opacity + this.transitionStep;
                //alert(opacity);
                this.previewContainer.style.opacity = this.opacity / 100;
                this.previewContainer.style.filter = 'alpha(opacity=' + this.opacity + ')'; /* For IE8 and earlier */
                this.timeoutTransition = setTimeout("myImageSliderObj.doTransition()", this.transitionSpeed);
            }
            else {
                this.opacity = 0;
                this.preview2Container.src = this.previewContainer.src;
                clearTimeout(this.timeoutTransition);
            }
        },

        slideDown: function() {
            if (this.styleTop > this.styleTopMin) {
                this.thumbnailContainer.style.top = this.styleTop + "px";
                this.styleTop -= this.step;
                this.timeout = setTimeout("myImageSliderObj.slideDown()", this.speed);
                // console.log('Moved right');
            }

        },

        slideUp: function() {
            // alert("cac");
            if (this.styleTop <= this.styleTopMax) {
                this.thumbnailContainer.style.top = this.styleTop + "px";
                this.styleTop += this.step;
                this.timeout = setTimeout("myImageSliderObj.slideUp()", this.speed);
                // console.log('Moved left');
            }

        },

        clearTimeout: function() {
            clearTimeout(this.timeout);
            // console.log('Stopped');
        }




    };

    // console.log(myImageSliderObj);
    // myImageSliderObj.newstep(20);
    // console.log(myImageSliderObj);
    myImageSliderObj.init();


});